<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    width: 200px;
    height: 200px;
    background-color: pink;
  }

  .box {
    width: 500px;
    height: 600px;
    background: red;
  }

  .font {
    font-size: 40px;
  }

  .add {
    border: 3px blue solid;
  }

  .tog {
    margin: 0 auto;
  }
</style>

<body>
  <div class="font box">1235</div>
  <script>
    //添加类名
    const box = document.querySelector('div')
    //classList 这个是追加类名 不会覆盖原来的类目
    box.classList.add('add')
    // 删除某个类名
    box.classList.remove('font')
    //切换类 有就删掉，没有就加上
    box.classList.toggle('tog')
  </script>
</body>

</html>